import React, { useEffect, useState } from "react";

// const  MyComponent = props =>{
//    const [myName, setMyName] = useState('Jone Doe');
//    const onInputChange = (e) =>{
//        console.log(e.target);
//        setMyName(e.target.value)
//    }
//    useEffect(()=>{
//        setTimeout(()=>{
//            setMyName('fhj')
//        },2000)
//    })
//     return(
//         // <h2>My Component</h2>
//         <>
//             <h4>{myName}</h4>
//             <input value={myName} onChange={onInputChange}></input>
//         </>
//     )
// }
const MyComponent = props =>{
    const [userInfo,setUserInfo] = useState({
        name:'John',
        lastname:'Doe'
    })
    
    return(
        <>
            <h4>{userInfo.name} {userInfo.lastname}</h4>
            <input value={userInfo.name} onChange={(e)=>setUserInfo({...userInfo,name:e.target.value})}></input>
            <h4>{userInfo.name} {userInfo.lastname}</h4>
            <input value={userInfo.lastname} onChange={(e)=>setUserInfo({...userInfo,lastname:e.target.value})}></input>
        </>
    )
}
export default MyComponent;

export const  SecondComponent = props =>{
    return(
        <h2>Second Component</h2>
        
    )
}